<template>
  <Row type="flex">
    <Col span="12">
      <div></div>
      <div class="box">{{ 1 + 1 }} : {{ a + b }}</div>
    </Col>
    <Col span="12">
      <Row>
        <Col span="12">
          <div class="box">{{ 1 + 1 }} : {{ a + b }}</div>
        </Col>
      </Row>
    </Col>
  </Row>
  <Row tyoe="flex" align="middle">
    <Col span="12">
      <Button type="default" @click="add">栏目1</Button>
    </Col>
    <Col style="margin-left: auto">
      <Button type="default">栏目2</Button>
    </Col>
  </Row>
  <div class="gridTest">
    <div class="gt-item">1</div>
    <div class="gt-item">2</div>
    <div class="gt-item">3</div>
  </div>
  {{ list }}
  <Checkbox v-model="item.selected" v-for="(item, index) in list" :key="index">{{ item.name }}</Checkbox>
  <myBox v-model="list">
    <!-- <template #check="row">{{ row }}</template> -->
  </myBox>
</template>
<script>
import myBox from './251029_1.vue'
export default {
  components: {
    myBox
  },
  data() {
    return {
      a: 1,
      b: 2,
      list_value: [],
      list: [
        {
          name: 1,
          selected: true
        },
        {
          name: 2,
          selected: true
        }
      ]
    }
  },
  methods: {
    add() {
      this.a++
    }
  },
  mounted() {
    console.log(`helloworld`)
    const a = 1
    const b = 2
    const c = a + b
    console.log(c)
    const obj = {
      a: 1,
      b: 2
    }
    let transformObj = Object.entries(obj).map(([name, value]) => {
      return {
        name,
        value
      }
    })
    console.log(transformObj)
  }
}
</script>
<style lang="scss" scoped>
.gridTest {
  display: grid;
  grid-template-columns: repeat(2, 100px);
  gap: 10px 100px;
  .gt {
    &-item {
      border: 1px solid #000;
      width: 100px;
      height: 100px;
      // &:first-child{
      //   justify-self:flex-start;
      // }
      // &:last-child{
      //   justify-self:flex-end;
      // }
    }
  }
}
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
</style>
